<template>
    <div class="myYCSidebar">
        <div class="myYCSidebarOne">
            <img src="./../../assets/img/myYC/myYCSidebarLogo.png" alt="">
            <p>我的</p>
        </div>
        <div :class="index == 1? 'myYCSidebarTwo myYCSidebarS':'myYCSidebarTwo'" @click="SelectSidebar(1)">宝贝分类管理</div>
        <div :class="index == 2? 'myYCSidebarThree myYCSidebarS':'myYCSidebarThree'" @click="SelectSidebar(2)">店铺基础信息</div>
        <div :class="index == 3? 'myYCSidebarFour myYCSidebarS':'myYCSidebarFour'" @click="SelectSidebar(3)">发布宝贝</div>
        <div :class="index == 4? 'myYCSidebarFive myYCSidebarS':'myYCSidebarFive'" @click="SelectSidebar(4)">评价</div>
    </div>
</template>

<script>
    export default {
        name: "myYCSidebar",
        data(){
            return {
                // 控制侧边栏选中的是哪一个(1:宝贝分类管理)
                index:1,
            }
        },
        methods:{
            SelectSidebar(index){
                this.global.startLoading();
                this.index = index;
                switch(index) {
                    // 跳转宝贝分类基础
                    case 1:
                        this.$router.push({ path:'/myYC'});
                        break;
                    // 跳转店铺基础信息
                    case 2:
                        this.$router.push({ path:'/myStoreInfo'});
                        break;
                    // 跳转发布宝贝页面
                    case 3:
                        this.$router.push({ path:'/selectKind'});
                        break;
                    // 跳转评价
                    case 4:
                        this.$router.push({ path:'/myGoodsReviews'});
                        break;
                    default:

                }
                this.global.endLoading();
            },
            // 设置可以监听路由name的函数,保持页面状态
            watchRoute(routeName){
                // 获取当前路由name,改变侧边栏选中选项
                switch(routeName) {
                    // 宝贝分类管理
                    case "myBaby":
                        this.index = 1;
                        break;
                    // 店铺基础信息
                    case "myStoreInfo":
                        this.index = 2;
                        break;
                    // 店铺基础信息
                    case "myStoreInfo":
                        this.index = 3;
                        break;
                    // 评价
                    case "myGoodsReviews":
                        this.index = 4;
                        break;
                    default:
                }
            }
        },
        watch:{
            // 监听路由name
            $route(to,from){
                console.log(this.$route.name);
                this.watchRoute(this.$route.name);
            }
        },
        mounted(){
            // 刷新页面保持状态
            this.watchRoute(this.$route.name);
        }
    }
</script>

<style scoped>

    .myYCSidebar{
        width:165px;
        height:808px;
        background:rgba(255,255,255,1);
        text-align: center;
    }
    .myYCSidebarOne{
        margin-bottom: 40px;
    }
    .myYCSidebarOne img{
        margin: 20px auto 10px;
    }
    .myYCSidebarOne p{
        font-size: 17px;
        font-weight: 400;
        color: #333333;
    }
    .myYCSidebarTwo,
    .myYCSidebarThree,
    .myYCSidebarFour,
    .myYCSidebarFive{
        width:159px;
        height:57px;
        font-size:15px;
        font-weight:800;
        color:rgba(0,0,0,1);
        line-height: 57px;
        border-left: 6px solid #FFFFFF;
        margin-bottom: 15px;
        cursor: pointer;
    }
    .myYCSidebarS{
        color: #FB6451;
        background:#fee0dc;
        border-left: 6px solid #fb6451;
    }
</style>
